<template>
  <div class="SafeguardDetails">
    <div class="ele-title-1"><h4>订单详情</h4></div>
    <div class="ele-title-2">
      <h2>状态:待商家处理</h2>
      <h2>售后方式:仅退款</h2>
    </div>
    <div class="ele-Payment">
      <p>退款金额:&nbsp;<span>123</span>元</p>
      <p>
        <el-button type="primary">同意</el-button>
        <el-button type="primary">拒绝</el-button>
        <el-button type="primary">修改退款金额</el-button>
      </p>
    </div>
    <div class="ele-Remarks">
      <h4>协商备注</h4>
      <div class="ele-rks-tol">
        <div class="tol-left">
          <el-input
            v-model="textrea"
            class="ele-textarea"
            :autosize="{ minRows: 6, maxCols: 6 }"
            type="textarea"
            placeholder="请输入内容"
          />
          <el-button plain class="ele-submit">提交</el-button>
        </div>
        <div class="tol-right">
          <div class="reight-title">
            <p>2021-01-22&nbsp;&nbsp;12:00&nbsp;&nbsp;lalalla</p>
            <p>用户已经用过，还是坚持退款。</p>
          </div>
          <div class="reight-title">
            <p>2021-01-22&nbsp;&nbsp;12:00&nbsp;&nbsp;lalalla</p>
            <p>用户已经用过，还是坚持退款。</p>
          </div>
          <div class="reight-title">
            <p>2021-01-22&nbsp;&nbsp;12:00&nbsp;&nbsp;lalalla</p>
            <p>用户已经用过，还是坚持退款。</p>
          </div>
          <div class="reight-title">
            <p>2021-01-22&nbsp;&nbsp;12:00&nbsp;&nbsp;lalalla</p>
            <p>用户已经用过，还是坚持退款。</p>
          </div>
          <div class="reight-title">
            <p>2021-01-22&nbsp;&nbsp;12:00&nbsp;&nbsp;lalalla</p>
            <p>用户已经用过，还是坚持退款。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="custom-radio">
      <el-radio-group>
        <el-radio-button label="包裹一" />
        <el-radio-button label="包裹二" />
      </el-radio-group>
    </div>
    <div class="cus-baoguo">
      <div class="left">
        <div class="tops">
          <div class="cus-btns">
            <p>
              <el-button
                type="text"
                @click="$router.push({ name: 'TBRBTUModify' })"
              >修改</el-button>
            </p>
            <p><el-button type="primary">确认已收货</el-button></p>
          </div>

          <p><span>发货时间:</span><span>143256u786543</span></p>
          <div class="cus-middle">
            <p>
              <span>发货方式:</span><span class="margin">143256u786543</span>
            </p>
            <p><span>送货员:</span><span class="margin">143256u786543</span></p>
          </div>
          <p><span>处理人:</span><span>143256u786543</span></p>
          <p><span>入库状态:</span><span>143256u786543</span></p>
        </div>
        <div class="bottoms">
          <div class="cus-list">
            <div class="cus-left">
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              >
            </div>
            <div class="cus-right">
              <p>内容标题</p>
              <p>设备编号:</p>
            </div>
          </div>
          <div class="cus-list">
            <div class="cus-left">
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              >
            </div>
            <div class="cus-right">
              <p>内容标题</p>
              <p class="cus-font">规格:蓝色</p>
              <p>设备编号:</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <p class="right-title">配送状态</p>
        <el-steps
          direction="vertical"
          :active="1"
          :space="50"
          style="margin-top:30px"
        >
          <el-step title="2021-2-22 12:22" description="已收货" />
          <el-step title="2021-2-22 12:22" description="送货中" />
          <el-step title="2021-2-22 12:22" description="待送货" />
          <el-step title="2021-2-22 12:22" description="已配货" />
          <el-step title="2021-2-22 12:22" description="待配货" />
        </el-steps>
      </div>
    </div>
    <div class="ele-content-info">
      <ul>
        <li><span class="ele-title-txt">售后信息</span></li>
        <li>
          <span class="ele-font-left ele-font-tow">售后方式:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left ele-font-tow">神情售后时间:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left ele-font-tow">申请人:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left ele-font-tow">联系方式:</span><span>收货人:</span>
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">售后类型</span></li>
        <li>
          <span class="ele-font-left">售后方式:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left">退款金额:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left">退款件数:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left">退款原因:</span><span>收货人:</span>
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">订单信息</span></li>
        <li>
          <span class="ele-font-left">商品金额:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left">实付金额:</span><span>收货人:</span>
        </li>
        <li>
          <span class="ele-font-left">退款件数:</span><span>收货人:</span>
        </li>
        <li class="ele-font"><span class="ele-font-left">订单号:</span><span>收货人:</span></li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">下单信息</span></li>
        <li><span class="ele-font-left">物流:</span><span>收货人</span></li>
        <li><span class="ele-font-left">下单门店:</span><span>收货人收货人收货人收货人收货人</span></li>
        <li><span class="ele-font-left">门店地址:</span><span>收货人</span></li>
      </ul>
    </div>

    <table class="tableCustom">
      <thead>
        <tr>
          <td>商品</td>
          <td>单价</td>
          <td>数量</td>
          <td>类型</td>
          <td>运费</td>
          <td>优惠</td>
          <td>合计</td>
          <td>状态</td>
        </tr>
      </thead>
      <tbody>
        <tr class="for-list">
          <td class="ele-tr-td">
            <div class="ele-te-div">
              <img src="" alt="">
              <div>
                <p>标题</p>
                <p>规格:</p>
                <p>设备编号:</p>
              </div>
            </div>
          </td>
          <td>单价</td>
          <td>数量</td>
          <td>类型</td>
          <td>运费</td>
          <td>优惠</td>
          <td>合计</td>
          <td>状态</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'SafeguardDetails',
  data() {
    return {
      textrea: ''
    }
  },
  methods: {
    /** 发货 */
    goDelivery() {}
  }
}
</script>

<style lang="scss" scoped>
.SafeguardDetails {
  padding: 40px;
  .ele-title-2 {
    margin-top: 40px;
    display: flex;
    h2:last-child {
      margin-left: 40px;
    }
  }
  .ele-Payment {
    width: 50%;
    border-radius: 5px;
    p:first-child {
      font-size: 15px;
      color: gray;
    }
    p:last-child {
      margin-top: 30px;
      .el-button--medium {
        width: 125px;
      }
      .el-button--medium:nth-child(2),
      .el-button--medium:last-child {
        margin-left: 30px;
      }
    }
  }
  .ele-Remarks {
    width: 100%;
    margin-top: 50px;
    .ele-rks-tol {
      border: 2px solid #f1f1f1;
      padding: 10px 15px 10px 20px;
      border-radius: 5px;
      display: flex;
      .tol-left,
      .tol-right {
        width: 50%;
      }
      .tol-left > .ele-textarea {
        display: flex;
        flex-direction: column;
        padding-right: 10%;
        padding-top: 10px;
      }
      .tol-left > .ele-submit {
        margin-top: 20px;
        width: 100px;
      }
      .tol-right {
        border-left: 2px solid #f1f1f1;
        height: 200px;
        padding-left: 4%;
        overflow-y: auto;
        .reight-title {
          margin-top: 30px;
          p:first-child {
            font-size: 12px;
            color: gray;
          }
          p:last-child {
            font-size: 14px;
          }
        }
      }
    }
  }
  .ele-content-info {
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    ul,
    li {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul {
      padding: 20px 60px 20px 20px;
      li {
        padding: 10px 0px;
        font-size: 15px;
      }
      .ele-title-txt {
        font-size: 16px;
        font-weight: bold;
      }
      .ele-font-left {
        display: inline-block;
        width: 80px;
      }
      .ele-font-tow {
        width: 100px;
      }
      .ele-font {
        color: gray;
      }
    }
  }

  .tableCustom {
    width: 100%;
    border: 1px solid #f3f3f3;
    border-collapse: collapse;
    margin-top: 30px;
    thead {
      background: #f3f3f3;
      height: 50px;
      tr > td {
        line-height: 50px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
      }
    }
    tbody {
      .for-list > .ele-tr-td {
        width: 25%;
        .ele-te-div {
          display: flex;
          align-items: center;
          padding-left: 20px;
          img {
            width: 100px;
            height: 100px;
            object-fit: cover;
          }
          div {
            margin-left: 15px;
            font-size: 14px;
            p:nth-child(2) {
              color: gray;
            }
          }
        }
      }
    }
  }
  .custom-radio {
    margin: 30px 0px;
  }
  .cus-baoguo {
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    display: flex;
    .left,
    .right {
      padding: 30px;
    }
    .left {
      flex-basis: 60%;
      border-right: 1px solid #e6e6e6;
      position: relative;
      .cus-btns {
        position: absolute;
        display: flex;
        right: 0;
        top: 0;
        .el-button {
          margin: 0px 20px;
        }
      }
      .tops {
        p {
          margin: 10px 0px;
          span:first-child {
            display: inline-block;
            width: 80px;
          }
        }
        .cus-middle {
          margin: 0;
          padding: 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .margin {
            margin-right: 20px;
          }
          .el-button {
            margin-left: 20px;
          }
        }
      }
      .bottoms {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        .cus-list {
          width: 400px;
          display: flex;
          align-items: center;
          .cus-left {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .cus-right {
            margin-left: 20px;
            .cus-font {
              font-size: 14px;
              color: gray;
            }
          }
        }
      }
    }
    .right {
      flex-grow: 1;
      position: relative;
      .right-title {
        position: absolute;
        top: 10px;
      }
    }
  }
}
</style>
